<template>
 <div id="Record">
  <x-header :left-options="{backText: ''}" >订单奖励记录<a slot="right" @click="Record">提现记录</a></x-header>
  <div class="record">
    <div class="record_top">
      <ul>
        <li>
            <p>累计收益</p>
            <span>￥{{ getRewardList.sumProfit }}</span>
        </li>
        <li>
            <p>剩余收益</p>
            <span>￥{{ getRewardList.profit}}</span>
        </li>        
      </ul>
      <x-button type="primary" @click.native="request">立即提现</x-button>     
    </div>
    <div class="record_bottom">
      <tab>
        <tab-item selected @on-item-click="onItemClick">全部</tab-item>
        <tab-item @on-item-click="onItemClick">一级奖励</tab-item>
        <tab-item @on-item-click="onItemClick">二级奖励</tab-item>
      </tab>
      <div v-if="!flg">
        <div class="record_bottom_list" v-for="(item,index) in dateList" :key="index" >
          <div class="record_bottom_heder" :class="`comment-stars-width`+item.sumReward">
            <p class="left">{{ item.starTime }}月</p>
            <!-- <span class="right"><em>{{ item.sumReward?`￥总收益`+ item.sumReward:item.starTime + `暂无数据` }}</em></span> -->
            <span>
              <span class="right" v-if="item.sumReward">总收益￥{{ item.sumReward }}</span>
              <span class="right" v-if="!item.sumReward">{{ item.starTime }}月暂无数据</span>
            </span> 
          </div>
          <ul>
            <li v-for="(i,k) in item.rewardList" :key="k">
              <div class="record_bottom_l">
                <img class="left" :src="i.img" alt="" style="width:50px;margin-top:12px;">
                <p class="left">
                  <span class="nickname" style="font-size:.3rem">{{ i.nickName }}</span>
                  <span style="font-size:.24rem">{{ i.type==1?'成功预订酒店':'下级成功预订酒店' }}</span>
                  <span style="font-size:.24rem">{{ i.createTime }}</span>                 
                </p>
              </div>
              <div class="record_bottom_r">
                <p> ￥{{ i.reward }} </p>               
              </div>             
            </li>
          </ul>
        </div> 
      </div>
        
        <div style="text-align:center;background:#fff;line-height:7.5rem" v-if="flg">
            <img class="no_data" src="@/assets/no_data.png" alt="" style="margin:0">
        </div>     
    </div>
  </div>
 </div>
</template>
<script>
import { XHeader, Scroller, XButton, Tab, TabItem } from "vux";
import { getRewardList } from "@/service/home.js";
import axios from "axios";
export default {
  components: { Scroller, XHeader, XButton, Tab, TabItem },
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      type: 0,
      getRewardList: "",
      dateList: "",
      isA: true,
      flg: ""
    };
  },
  mounted() {
    this._getRewardList();
  },
  methods: {
    //获取订单奖励数据
    _getRewardList() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var year = date.getFullYear();
      var LastYear = date.getFullYear();
      var LastMonth = month - 1;
      LastMonth == 0 ? (LastMonth = 12) : LastMonth;
      if (LastMonth == 12) {
        LastYear = LastYear - 1;
      }
      var data = {
        dateList: [
          { starTime: `${year}-${month}-22` },
          { starTime: `${LastYear}-${LastMonth}-22` },
          { starTime: `${LastYear}-${LastMonth - 1}-22` }
        ],
        type: this.type
      };
      getRewardList(data).then(res => {
        this.getRewardList = res.data;
        this.dateList = res.data.dateList;
        var arr = [];
        this.dateList.forEach(item => {
          if (item.sumReward == 0) {
            arr.push(item);
          }
          if (arr.length == 3) {
            this.flg = true;
          } else {
            this.flg = false;
          }
        });
      });
    },
    //切换导航
    onItemClick(index) {
      this.type = index;
      this._getRewardList();
    },
    // 提现记录
    Record() {
      this.$router.push("../WithdrawalsRecord");
    },
    //立即提现
    request() {
      //如果有授权
      if (sessionStorage.getItem("android") == "true") {
        if (this.userInfo.openId) {
          this.$router.push("/my/CashWithdrawal");
        } else {
          alert("请从微信公众号授权");
          return false;
        }
      }
      console.log(sessionStorage.getItem("android") == "true");
      if (this.userInfo.openId) {
        this.$router.push("/my/CashWithdrawal");
      } else {
        this.$router.push("/my/code");
      }
    }
  }
};
</script>
<style scoped lang="less">
#Record {
  background: url(../../../assets/record_login.png) no-repeat;
  background-size: 100%;
  height: 247px;
  .record {
    padding-top: 23px;
    .record_top {
      width: 94%;
      margin: 0 auto;
      ul {
        display: flex;
        li {
          flex: 1;
          text-align: center;
          p {
            color: #fff;
            font-size: 15px;
          }
          span {
            font-size: 18px;
            color: #fcdd45;
          }
        }
      }
      button {
        margin-top: 59px;
      }
    }
    .record_bottom {
      color: #999999;
      background: #fff;
      .record_bottom_list {
        margin-bottom: 0.3rem;
        .comment-stars-width0 {
          background: #8239d1 !important;
          color: #fff;
          .right {
            color: #fff;
          }
        }
        .record_bottom_heder {
          overflow: hidden;
          line-height: 0.5rem;
          background: #f3f3f3;
          padding: 0 4%;
          font-size: 0.24rem;
          span {
            span {
              color: red;
            }
          }
        }
        ul {
          padding: 0 4%;
          overflow: hidden;
          li {
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #ddd;
            display: flex;
            .record_bottom_l {
              padding: 0;
              flex: 1;
              img {
                border-radius: 50%;
              }
              p {
                width: 3rem;
                margin-left: 0.26rem;
                margin-top: 0.05rem;
                span {
                  float: left;
                  width: 100%;
                  height: 20px;
                  line-height: 32px;
                }
                .nickname {
                  color: #000000;
                  font-size: 0.3rem;
                }
              }
            }
            .record_bottom_r {
              color: red;
            }
          }
        }
      }
    }
  }
  .vux-header {
    .vux-header-right {
      line-height: 12px;
      a {
        font-size: 18px;
        color: #fff;
      }
    }
  }
}
</style>
